import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Sudoku, Label } from 'iftide';

export default class User2 extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        const dataList_3 = [
            {
                'icon': require('./Icon.png'),
                'title': '投资理财长文本测试',
                'description1': '说明说明说明',
                'description2': ' ',
                'onPress': () => alert(1),
                'showBadge': true,
                'badge': 'NEW',
                'badgeType': 'popover',
                'badgePosition': 'rightTop'
            },
            {
                'icon': require('./Icon.png'),
                'title': '账户转账',
                'description1': '说明说明说明说',
                'description2': '说明说明',
                'onPress': () => alert(2),
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投',
                'description1': '说明说明说明说',
                'description2': '说明说明说明说',
                'onPress': () => alert(3),
                'showBadge': true,
                'badge': '万2.6'
            },
        ];

        const dataList_4 = [
            {
                'icon': require('./Icon.png'),
                'title': 'test long title description test test',
            },
            {
                'icon': require('./Icon.png'),
                'title': '注册账户转账',
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投',
                'showBadge': true,
                'badge': '万2.6'
            },
            {
                'icon': require('./Icon.png'),
                'title': '融e购',
            },
        ];

        return (
            <ScrollView>
                <View style={[styles.container, {backgroundColor: '#F5F7F9'}]}>
                    <Label text = '宫格样式 - 图标+标题' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Sudoku columnCount={3} singleTitle={true} cellHeight={100} dataSource={dataList_3} onClick={(data) => alert('clicked ' + data.title)}/>
                <View style={styles.divider}/>
                <Sudoku columnCount={3} singleTitle={true} dataSource={dataList_3} hasInnerBorder={false} onClick={(data) => alert('clicked ' + data.title)}/>

                <View style={[styles.container, {backgroundColor: '#F5F7F9'}]}>
                    <Label text = '宫格样式 - 图标+标题+文字说明' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Sudoku columnCount={3} singleTitle={true} dataSource={dataList_3} cellHeight={100} hasDescription={true} onClick={(data) => alert('clicked ' + data.title)}/>
                <View style={styles.divider}/>
                <Sudoku columnCount={3} singleTitle={true} dataSource={dataList_3} hasInnerBorder={false} hasDescription={true} onClick={(data) => alert('clicked ' + data.title)}/>

                <View style={[styles.container, {backgroundColor: '#F5F7F9'}]}>
                    <Label text = '宫格样式 - 图标+标题' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Sudoku columnCount={3} singleTitle={true} dataSource={dataList_4} onClick={(data) => alert('clicked ' + data.title)}/>
                <View style={styles.divider}/>
                <Sudoku columnCount={5} dataSource={dataList_4} singleTitle={true} hasInnerBorder={false} onClick={(data) => alert('clicked ' + data.title)}/>
                <View style={styles.divider}/>
                <Sudoku columnCount={4} cellHeight={100} dataSource={dataList_4} singleTitle={false} hasInnerBorder={true} />
            </ScrollView>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 13,
        paddingVertical: 8,
        backgroundColor: '#F5F7F9'
    },
    divider: {
        height: 10,
        backgroundColor: '#F5F7F9'
    }
});